<template>
    <div>
        <div id="nav">
            <Navbar>
                <img slot="left" src="static/icons/back.png" @click="back">
                <span slot="center">景点门票</span>
            </Navbar>
        </div>
        <div id="content-box">
            <div class="tickets-box" v-for="(i,b) in tickets">
                <router-link :to="'/ticketsDetail/abc/a/'+b">
                <img :src="'http://static.kaytrip.com/'+i.thumb">
                </router-link>
                
                <p class="title">{{i.name_cn}}</p>
                <div class="location">
                    <div class="left"><span>{{i.country_cn}}●{{i.city_cn}}</span><span class="fa fa-location-arrow"></span></div>
                    <div>
                        <span class="price">€{{i.price_base}}</span>
                    </div>
                </div>
            </div>
        </div>
    

        <!--<h3>{{tickets}}</h3>-->

    </div>
</template>

<script>
import Navbar from "../components/Navbar.vue";
import {mapState} from "vuex"
export default {
    components:{
        Navbar
    },
    methods:{
        back(){
            history.back();
        }
    },
    mounted:function(){
        this.$store.dispatch("requestTicket")
    },
    computed:{
        ...mapState({
            tickets:state=>state.ninePage.tickets
        })
    }

}
</script>

<style lang='css' scoped>
    p{
        margin: 0;
    }
    #content-box{
        /*padding-top: 53px;*/
        background-color: #f4f4f4;
        display: flex;
        flex-wrap: wrap;
    }
    .img-size{
        width: 30px;
        height: 30px;
        /*border: 1px solid  red;*/
    }
    #nav{
        background-color: #036ab5;
        color: #fff;
    }
    #nav img{
        width: 30px;
        height: 30px;
        margin-top: 13px;
    }
    .tickets-box{
        width: 46vw;
        /*height: 200px;*/
        /*border: 1px solid black;*/
        background-color: #fff;
         margin: 5px;
         border-radius: 8px;
         overflow: hidden;
    }
    .tickets-box img{
        width: 100%;
        /*height: 100px;*/
        /*border: 1px solid red;*/
    }
    .title{
        color: #3e3c3c;
        font-size: 18px;
    }
    .location{
        /*border: 1px solid red;*/
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding: 0 10px;
    }
    .left{
        font-size: 12px;
        color: #7d7d7d;
        margin-top: 3px;
    }
    .price{
        color: #f76f5f;
        font-size: 18px;
    }

</style>